<template>
<div id='recommend'>
    <div class="page-swipe">
        <mt-swipe>
            <mt-swipe-item class="slide1">
                <router-link to="/mine">
                    <img src="./recommendImage/yidong.jpg" />
                </router-link>
            </mt-swipe-item>
            <mt-swipe-item class="slide2">
                <router-link to="/product">
                    <img src="./recommendImage/yidong2.jpg" />
                </router-link>
            </mt-swipe-item>
            <mt-swipe-item class="slide3">
                <router-link to="/detailPage">
                    <img src="./recommendImage/yidong3.jpg" />
                </router-link>
            </mt-swipe-item>
        </mt-swipe>
    </div>
    <div>
        <img src='./recommendImage/yidong2.jpg' style="height:3.28rem; width:100%;">
    </div>
    <div class='private'>
        <p>私人订制&nbsp;<i class='icon iconfont icon-youjiantou'></i></p>
    </div>
    <div>
        <ul class='clear listUl'>
            <li>
                 <img src='./recommendImage/1.jpg'>
                <p>专属你的服务</p>
                <p>RMB<strong>200</strong></p>
            </li>
            <li>
                 <img src='./recommendImage/2.jpg'>
                <p>专属你的服务</p>
                <p>RMB<strong>200</strong></p>
            </li>
            <li>
                 <img src='./recommendImage/window1-1.jpg'>
                <p>专属你的服务</p>
                <p>RMB<strong>200</strong></p>
            </li>
            <li>
                 <img src='./recommendImage/window1-2.jpg'>
                <p>专属你的服务</p>
                <p>RMB<strong>200</strong></p>
            </li>
            <li>
                <img src='./recommendImage/window1-3.jpg'>
                <p>专属你的服务</p>
                <p>RMB<strong>200</strong></p>
            </li>
            <li>
                 <img src='./recommendImage/window1-4.jpg'>
                <p>专属你的服务</p>
                <p>RMB<strong>200</strong></p>
            </li>
        </ul>
    </div>
     <div>
        <img src='./recommendImage/yidong.jpg' style="height:3.28rem; width:100%;">
        <ul class='imgPic clearfloat'>
            <li>
                <p>积分兑换</p>
                <img src='./recommendImage/window1-4.jpg' />
            </li>
            <li>
                <p>邀请返利</p>
                <img src='./recommendImage/window1-3.jpg'/>
            </li>
            <li>
                <p>邀请返利</p>
                <img src='./recommendImage/window1-2.jpg'/>
            </li>
        </ul>
    </div>
    <div class="manufacturing">
        <h3>品牌制造商直供 →</h3>
        <ul class='clearfloat'>
            <li class="">
                <p>家电保养 </p>
                <p><span>RMB</span> 200</p>
                <div class="imgBox">
                    <img src='./recommendImage/1.jpg'/>
                </div>
                
            </li>
            <li class="">
                <p>家电保养 </p>
                <p><span>RMB</span> 200</p>
                <div class="imgBox">
                    <img src='./recommendImage/2.jpg'/>
                </div>
                
            </li>
            <li class="">
                <p>家电保养 </p>
                <p><span>RMB</span> 200</p>
                <div class="imgBox">
                    <img src='./recommendImage/window1-1.jpg'/>
                </div>
                
            </li>
            <li class="">
                <p>家电保养 </p>
                <p><span>RMB</span> 200</p>
                <div class="imgBox">
                    <img src='./recommendImage/window1-2.jpg'/>
                </div>
                
            </li>
        </ul>
    </div>
    <div class="newShop">
     <h3 class="h3">品牌制造商直供 →</h3>
        <ul >
            <li>
                <div class='leftImg'>
                    <img src='./recommendImage/window1-4.jpg'/>
                </div>
                <div class="shopText">
                    <h3>空气净化空调加湿器</h3>
                    <p>RMB<span>200</span></p>
                    <a class="btn">立即购买</a>
                    <div class="jdt">
                    <div class="PanicBy">已抢购<span >10</span>%</div>
                    <div class="Number">已强<span >10</span>件</div>
                        <div class="container"> 
                            <div class="bar" ></div>  
                         </div> 
                    </div>
                    
                </div>
            </li>
            <li>
                <div class='leftImg'>
                    <img src='./recommendImage/window1-3.jpg'/>
                </div>
                <div class="shopText">
                    <h3>空气净化空调加湿器</h3>
                    <p>RMB<span>200</span></p>
                    <a class="btn">立即购买</a>
                    <div class="jdt">
                    <div class="PanicBy">已抢购<span >10</span>%</div>
                    <div class="Number">已强<span >10</span>件</div>
                        <div class="container"> 
                            <div class="bar" ></div>  
                         </div> 
                    </div>
                    
                </div>
            </li>
            <li>
                <div class='leftImg'>
                    <img src='./recommendImage/window1-2.jpg'/>
                </div>
                <div class="shopText">
                    <h3>空气净化空调加湿器</h3>
                    <p>RMB<span>200</span></p>
                    <a class="btn">立即购买</a>
                    <div class="jdt">
                    <div class="PanicBy">已抢购<span >10</span>%</div>
                    <div class="Number">已强<span >10</span>件</div>
                        <div class="container"> 
                            <div class="bar" ></div>  
                         </div> 
                    </div>
                    
                </div>
            </li>
            <li>
                <div class='leftImg'>
                    <img src='./recommendImage/window1-1.jpg'/>
                </div>
                <div class="shopText">
                    <h3>空气净化空调加湿器</h3>
                    <p>RMB<span>200</span></p>
                    <a class="btn">立即购买</a>
                    <div class="jdt">
                    <div class="PanicBy">已抢购<span >10</span>%</div>
                    <div class="Number">已强<span >10</span>件</div>
                        <div class="container"> 
                            <div class="bar" ></div>  
                         </div> 
                    </div>
                    
                </div>
            </li>
            <li>
                <div class='leftImg'>
                    <img src='./recommendImage/1.jpg'/>
                </div>
                <div class="shopText">
                    <h3>空气净化空调加湿器</h3>
                    <p>RMB<span>200</span></p>
                    <a class="btn">立即购买</a>
                    <div class="jdt">
                    <div class="PanicBy">已抢购<span >10</span>%</div>
                    <div class="Number">已强<span >10</span>件</div>
                        <div class="container"> 
                            <div class="bar" ></div>  
                         </div> 
                    </div>
                    
                </div>
            </li>
        </ul>
    </div>
    <div class='EndTime clearfloat'>
        <div class='OverTimeTop'>
            <div class='diab'>限时购物</div> <div class='diab'><div class="timeBox">00</div>:<div class="timeBox">56</div>:<div class="timeBox">32</div></div>
        </div>
        <ul class="clearfloat">
            <li>
                <div class='divImg'><img src='./recommendImage/yidong.jpg'/></div>
                <p>RME <span>200</span></p>
            </li>
             <li>
                <div class='divImg'><img src='./recommendImage/yidong2.jpg'/></div>
                <p>RME <span>200</span></p>
            </li>
             <li>
                <div class='divImg'><img src='./recommendImage/yidong3.jpg'/></div>
                <p>RME <span>200</span></p>
            </li>
        </ul>
        <p class='lookAll'>查看全部 →</p>
    </div>
    <div class="shopShow clearfloat">
        <div class="shopLeft">
            <h3>福利社</h3>
            <p>Welfare agency</p>
            <img src='./recommendImage/yidong.jpg'/>
        </div>
        <div class="shopRight">
            <div class="imgBox">
                <h3>福利社</h3>
                <p>Welfare agency</p>
                <img src='./recommendImage/yidong2.jpg'/>
            </div>
            <div class="imgBox">
                <h3>福利社</h3>
                <p>Welfare agency</p>
                <img src='./recommendImage/yidong3.jpg'/>
            </div>
        </div>
    </div>
    <div class="Selected">
        <div class="SelectedTop">专题精选 →</div>
        <div class="scroBox">
            <ul class='clearfloat'>
                <li>
                    <img src='./recommendImage/window1-1.jpg'/>
                    <div><span class="infoText">把这个片干净的地方带给你</span>  <span class="reB">RMB<strong>200</strong></span></div>
                    <P>精致服务</P>
                </li>
                <li>
                    <img src='./recommendImage/window1-2.jpg'/>
                    <div><span class="infoText">把这个片干净的地方带给你</span>  <span class="reB">RMB<strong>200</strong></span></div>
                    <P>精致服务</P>
                </li>
                <li>
                    <img src='./recommendImage/window1-3.jpg'/>
                    <div><span class="infoText">把这个片干净的地方带给你</span>  <span class="reB">RMB<strong>200</strong></span></div>
                    <P>精致服务</P>
                </li>
                <li>
                    <img src='./recommendImage/window1-4.jpg'/>
                    <div><span class="infoText">把这个片干净的地方带给你</span>  <span class="reB">RMB<strong>200</strong></span></div>
                    <P>精致服务</P>
                </li>
                <li>
                    <img src='./recommendImage/1.jpg'/>
                    <div><span class="infoText">把这个片干净的地方带给你</span>  <span class="reB">RMB<strong>200</strong></span></div>
                    <P>精致服务</P>
                </li>
                <li>
                    <img src='./recommendImage/2.jpg'/>
                    <div><span class="infoText">把这个片干净的地方带给你</span>  <span class="reB">RMB<strong>200</strong></span></div>
                    <P>精致服务</P>
                </li>
            </ul>
        </div>
    </div>
    <div class='isLike'>
        <h3>猜你喜欢</h3>
        <ul>
            <li>
                <div class="imgBox">
                    <img src='./recommendImage/window1-1.jpg'/>
                </div>
                <p>
                    家居保养沙发
                </p>
                <p>
                    RMB <strong>299</strong>
                </p>
            </li>
            <li>
                <div class="imgBox">
                    <img src='./recommendImage/window1-2.jpg'/>
                </div>
                <p>
                    家居保养沙发
                </p>
                <p>
                    RMB <strong>299</strong>
                </p>
            </li>
            <li>
                <div class="imgBox">
                    <img src='./recommendImage/window1-3.jpg'/>
                </div>
                <p>
                    家居保养沙发
                </p>
                <p>
                    RMB <strong>299</strong>
                </p>
            </li>
            <li>
                <div class="imgBox">
                    <img src='./recommendImage/window1-4.jpg'/>
                </div>
                <p>
                    家居保养沙发
                </p>
                <p>
                    RMB <strong>299</strong>
                </p>
            </li>
        </ul>
    </div>
    </div>
</template>
<style lang="">
    .isLike{
        font-size:0.2rem;
    }
    .isLike h3{
        height:1.24rem;
        line-height:1.24rem;
        font-size:0.4rem;
    }
    .isLike li .imgBox{
        height:3.4rem;
    }
    .isLike li{
        width:45%;
        height:4.7rem;
        margin-left: 3%;
        float:left;
        border:1px solid #ddd;
        border-radius:5px;
        margin-bottom:0.2rem;
        overflow:hidden;
        box-shadow:0px 0px 4px #ddd;
        text-align:left;
    }
    .isLike li img{
        width:100%;
        height:100%;
    }
    .isLike li p{
        margin-top:0.2rem;
        padding-left:0.2rem;
    }
    .isLike li p:nth-child(3){
        margin-top:0.1rem;
    }
    .isLike li p strong{
        font-size:0.35rem;
    }
    .Selected{
        font-size:0.2rem;
    }
    .Selected li .infoText{
        padding:0;
        display:inline-block;
        width:2.5rem;
    }
    .Selected .scroBox{
        overflow-x:scroll;
        height:2.6rem;
    }
    .SelectedTop {
        height:1.2rem;
        line-height:1.2rem;
        font-size:0.4rem;
    }
    .Selected ul{
        width:30rem;
    }
    .Selected li .reB{
        float: right;
    }
    .Selected li span strong{
        font-size:0.35rem;
        padding-left:0.1rem;
    }
    .Selected li p{
        padding-top:0.1rem;
    }
    .Selected li{
        width:4.4rem;
        text-align:left;
        float:left;
        padding-left:0.2rem;
    }
    .Selected li img{
        width:100%;
    }
    .shopShow .shopLeft,.shopShow .shopRight{
        width:45%;
        padding:0 2.5%;
        height:4.4rem;
        font-size:0.3rem;
        float:left;
        text-align:left;
    }
    .imgBox img{
        width:100%;
    }
    .imgBox{
        height:50%;
    }
    .imgBox h3,.imgBox p{
        margin-bottom:0.1rem;
        padding-left:0.2rem;
    }
    .shopShow .shopLeft h3{
        font-size:0.4rem;
         margin-bottom:0.2rem;
         padding-left:0.2rem;
    }
     .shopShow .shopLeft p{
         margin-bottom:0.2rem;
         padding-left:0.2rem;
     }
    .shopShow .shopLeft img{
        width:100%;
    }
    .EndTime{
        font-size:0.2rem;
    }
    .diab{
        display:inline-block;
    }
    .lookAll{
        height:1rem;
        line-height:1rem;
        font-size:0.3rem;
    }
    .EndTime .OverTimeTop{
      height:1.26rem;  
      line-height:1.26rem;
      font-size:0.4rem;
    }
    .EndTime li{
        width:33%;
        float:left;
        height:3.2rem;
    }
    .divImg{
        height:70%;
        padding:0.2rem;
    }
    .EndTime li p{
        height:30%;
        padding-top:0.1rem;
    }
    .EndTime li p span{
        font-size:0.5rem;
    }
    .EndTime li img{
        width:100%;
        height:100%;
    }
    #homepage .page-swipe {
        height: 3.56rem;
        margin-top: 0.2rem;
    }
    .timeBox{
        display: inline-block;
    }
     .clear:after {
        content: "";
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
</style>
<style scoped>
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
.clearfloat{zoom:1} 
    #homepage .private{
        font-size:0.5rem;
        margin:0.5rem;
    }
    #homepage .icon-youjiantou{
        font-size:0.5rem;
    }
    #homepage .listUl li{
        float:left;
        font-size:0.25rem;
        width:25%;
        margin-left:6%;
    }
    #homepage .listUl li img{
        border-radius:0.2rem;
        width:100%;
        height:2.52rem;
        margin-bottom:0.2rem;
    }
    #homepage .listUl li p{
        margin-bottom:0.2rem;
        font-size:0.25rem;
    }
    #homepage .listUl li p strong{
        font-size:0.35rem;
        font-weight:700;
        padding-left:0.1rem;
    }
    #homepage .imgPic li{
        float:left;
        width:33%;
        font-size:0.3rem;
        height:2.7rem;
    }
    #homepage .imgPic li p{
        padding:0.2rem 0;
    }
    #homepage .imgPic li img{
        width:100%;
    }
    #homepage .manufacturing{
        font-size:0.3rem;
        border-top:0.1rem #ddd solid;
    }
    #homepage .manufacturing h3{
        padding:0.5rem;
        font-size:0.4rem;
    }
    .manufacturing li{
        float:left;
        width:50%;
        text-align: left;
        padding-top:0.1rem;
    }
    .manufacturing li p{
        padding-left:0.2rem;
        font-size:0.2rem;
        padding-top:0.1rem;
    }
    .manufacturing li {
        position:relative;
         height:2.5rem;
    }
    .manufacturing li .imgBox{
        width:70%;
        position:absolute;
        bottom:0.1rem;
        right:0.1rem;

    }
    .manufacturing li img{
        width:100%;
    }
    .newShop .h3{
        padding:0.5rem;
        font-size:0.4rem;
    }
    .newShop li{
        height:2.4rem;
        padding:0.2rem;
    }
    .newShop .leftImg{
        width:30%;
        float:left;
        height:100%;
    }
    .shopText{
         float:left;
         padding:0.2rem 0 0 0.4rem;
         text-align:left;
         position:relative;
         width:63%;
    }
    .shopText p span{
        font-size:0.4rem;
    }
    .newShop .leftImg img{
        width:100%;
        height:100%;
    }
    .newShop .shopText h3,.newShop .shopText{
        font-size:0.2rem;
    }
    .newShop .shopText{
        height:100%;
    }
    .newShop .shopText h3{
        margin-bottom:0.5rem;
         font-size:0.3rem;

    }
    .newShop .btn{
        padding: 0.15rem 0.24rem;
        border:2px solid #ddd;
        position:absolute;
        right:0;
        border-radius:5px;
        top:38%;
    }
    .container{
        border:1px solid #ddd;
        height:0.16rem;
        width:4.2rem;
        margin-top:0.75rem;
        border-radius:5px;
    }
    .jdt{
        position:relative;
    }
    .PanicBy,.Number{
        position:absolute;
        top:-0.3rem;
    }
    .Number{
        right:0.2rem;
    }
    .bar{
        background:#ddd;
        height:100%;
        width:50%;
    }
</style>